jQuery Mobile ボタンのアイコン

jQuery Mobile ボタンのアイコン

Clock Icon2011.12.26

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

はじめに

jQuery Mobileではフレームワークとしてボタンのアイコンが15個のアイコンが用意されています。殆どこれでだけ足りるのではないでしょうか。今回はアイコンの使い方について紹介します。

使ってみる

アイコンはdata-icon="{アイコンの名前}"で指定します。簡単ですね。

<a href="#" data-role="button" data-icon="arrow-l">arrow-l</a>

この例では、左向き矢印のアイコンを表示できます。また、data-iconpos="{left,right,top,buttom,notext}"でアイコンの表示位置を指定できます。notextの場合はアイコン画像だけが表示されます。

<a href="#" data-role="button" data-icon="arrow-l" data-iconpos="left">arrow-l</a>

サンプル

アイコン15個(ボタンのラベルにアイコン名を入れました)と表示位置5個のサンプルを作りました。ページ毎にテーマを変えています。各テーマの雰囲気と共に参考にしてみてください。

サンプルを開く(このサンプルはChromeブラウザでの閲覧をおすすめします。)

Share this article

facebook logohatena logotwitter logo

© Classmethod, Inc. All rights reserved.